<script src="../api/broadcastList.js"></script>
<template>
    <div class='home-container'>
        <SideNav :openeds="openeds" :activeTab="activeTab"></SideNav>
        <div class='right-container'>
            <Header class="header" :headerList="headerList"></Header>
            <div class="right-content white-color">
                <div class="add-title">
                    <img src="../../src/assets/img/welcome/add.png" alt="">
                    <span>新增直播大班课</span>
                </div>
                <div class="add-form-container">
                    <el-form ref="form" label-width="120px" :model="form" :rules="rules" class="add-form">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="课程名称" prop="name">
                                    <el-input v-model="form.name" placeholder="请输入课程名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="课序" prop="sortno">
                                        <el-select placeholder="请选择" v-model="form.sortno">
                                            <el-option value="1">1</el-option>
                                            <el-option value="2">2</el-option>
                                            <el-option value="3">3</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16" class="sub-name">
                                <el-form-item label="所属班级" prop="className">
                                    <el-input placeholder="所属班级" v-model="form.className"></el-input>
                                    <a class="link" @click="chooseClass">选择班级</a>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="teacher-contain">
                                <span class='teacher-span'>讲师：{{form.lecturerName}}</span>
                                <span>助教：{{form.assistantName}}</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="教室容量" prop="capacity">
                                    <el-select placeholder="请选择" v-model="form.capacity">
                                        <el-option value="10">10</el-option>
                                        <el-option value="100">100</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="提前进房时间" prop="preentertime">
                                    <el-select placeholder="请选择" v-model="form.preentertime">
                                        <el-option value="10">10</el-option>
                                        <el-option value="30">30</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="开课日期" required>
                                    <el-col :span="11">
                                        <el-form-item prop="date">
                                            <el-date-picker
                                                type="date"
                                                v-model="form.date"
                                                placeholder="选择日期"
                                                value-format="yyyy-MM-dd"
                                                style="width: 100%;"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="line date-line" :span="2">-</el-col>
                                    <el-col :span="11">
                                        <el-form-item prop="time">
                                            <el-time-picker placeholder="选择时间" v-model="form.time" style="width: 100%;"
                                                format="HH:mm" value-format="HH:mm">
                                            </el-time-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">
                                <el-form-item label="时长" prop="duration">
                                        <el-input v-model="form.duration" class="min-input"></el-input>
                                    <span>分钟</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="模板选择" prop="template">
                                    <el-radio-group v-model="form.template">
                                        <div class='temp-contain'>
                                            <div>
                                                <img src="../../src/assets/img/welcome/leftTemp.png" alt="">
                                                <el-radio label="classic">经典视窗</el-radio>
                                            </div>
                                            <div>
                                                <img src="../../src/assets/img/welcome/centerTemp.png" alt="">
                                                <el-radio label="triple">三分屏
                                                </el-radio>
                                            </div>
                                            <div>
                                                <img src="../../src/assets/img/welcome/rightTemp.png" alt="">
                                                <el-radio label="liveWall">视频墙</el-radio>
                                            </div>
                                        </div>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>

                        <el-form-item label="模板展示" prop="templateShow">
                            <el-radio-group v-model="form.templateShow">
                                <el-radio label="2">以ppt为主</el-radio>
                                <el-radio label="1">以视频为主</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item class="btn-group">
                                    <el-button type="primary" @click="submitForm('form')">确定</el-button>
                                    <el-button @click="resetForm('form')">重置</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import Header from '../../src/components/Header'
import SideNav from '../../src/components/SideNav'
import {
    addLargeClass,
} from '@/api/largeClass'
export default {
    name: 'addLargeClass',
    data() {
        return {
            headerList: ['直播', '面授', '新增面授课程'],
            openeds: ['b', 'b-1'],
            activeTab: 'Show',
            form: {
                capacity:'',
                sortno:'',
                preentertime:'',
                templateShow:'2',
                template:'classic'
            },
            rules:{
                name: [
                    { required: true,message:'请输入课程名字', trigger: 'blur' }
                ],
                sortno:[
                    { required: true, message:'请选择课序', trigger: 'change' }
                ],
                className:[
                    { required: true,message:'请选择所属班级', trigger: 'blur' }
                ],
                capacity:[
                    { required: true, message:'请选择容量',trigger: 'change' }
                ],
                preentertime:[
                    { required: true,message:'请选择提前进房时间', trigger: 'change' }
                ],
                date:[
                    { message:'请选择日期',required: true, trigger: 'change'}
                ],
                time:[
                    { message:'请选择时间', required: true, trigger: 'change'}
                ],
                duration:[
                    { required: true,message:'请输入时长', trigger: 'blur' }
                ],
                template:[
                    { required: true, message:'请选择模板',trigger: 'change' }
                ],
                templateShow:[
                    { required: true,message:'请选择模板展示', trigger: 'change' }
                ]
            },
            submitMsg:'添加成功'
        }
    },
    created() {
        this.setClassInfo(this.$route)
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        chooseClass() {
            this.$router.push({
                path: '/chooseClass', //跳转的路径
                query:{type:2}
            })
        },
        resetForm(formName) {
            this.resetRouteQueryInfo();
            this.$refs[formName].resetFields();
        },
        resetRouteQueryInfo(){
            if(Object.keys(this.$route.query).length!==0){
                this.$router.push({
                    path: '/addLargeClass',
                })
            }
        },
        setClassInfo(to){
            this.$set(this.form,'className',to.query.className || '')
            this.$set(this.form,'classId',to.query.classId || '')
            this.$set(this.form,'lecturerName',to.query.lecturerName || '')
            this.$set(this.form,'assistantName',to.query.assistantName || '')
        },
        async submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let beginDate = `${this.form.date} ${this.form.time}`
                    let endDate = new Date(new Date(beginDate).getTime() + (this.form.duration*60*1000))
                    let data = {
                        ctype:2,
                        name:this.form.name,
                        class:this.form.classId,
                        capacity:this.form.capacity,
                        preentertime:this.form.preentertime,
                        begindate:beginDate,
                        enddate:this.$moment(endDate).format('YYYY-MM-DD HH:mm'),
                        duration:this.form.duration,
                        template:this.form.template,
                        templateshow:this.form.templateShow,
                        sortno:this.form.sortno
                    }
                    console.log(data)
                    addLargeClass(data).then(res =>{
                        if (res.code == 1) {
                            this.$message({
                                message: this.submitMsg,
                                type: 'success'
                            })
                        }
                    })
                } else {
                    return false;
                }
            });
        },
    },
    components: {
        Header,
        SideNav
    },
    watch:{
        "$route" (to, from) {
            this.setClassInfo(to)
        }
    },
    deactivated() {
        if(this.$route.path!=='/chooseClass'){
            this.resetForm('form')
        }
    },
}
</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .sub-name {
        position: relative;

        .link {
            position: absolute;
            top: 1px;
            left: 20px;
            text-decoration: none;
            color: rgba(85, 168, 253, 1);
            cursor: pointer;
        }

        input {
            padding-left: 84px;
        }
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }
    }

    .add-form-container {
        width: calc(100% - 60px);
        margin: auto;
        border: 1px solid rgba(221, 223, 230, 1);

        .add-form {
            width: 800px;
            margin: auto;
            margin-top: 30px;
        }

        .el-select {
            width: 100%
        }
    }

    .temp-contain {
        .flex(row, space-between, center, nowrap);

        img {
            margin-right: 18px;
            margin-bottom: 10px;
            width: 120px;

        }
        >div {
            text-align: center;

            .el-radio {
                position: relative;
                left: -9px;
            }
        }
    }
    .teacher-contain {
        line-height: 40px;
        font-size: 14px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(96, 98, 102, 1);
    }

    .teacher-span {
        margin: 0px 30px;
    }

    .time-contain {
        font-size: 14px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(96, 98, 102, 1);
    }

    .min-input {
        width: 80px;
        height: 40px;
        margin-right: 10px;
    }

    .time-ins {
        margin-left: 30px;
        margin-right: 10px;

    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }

        span {
            font-size: 20px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
        }
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    .sub-name {
        input {
            padding-left: 84px !important;
        }
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
